<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI助手辅助问诊记录工具</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link href="https://fonts.googlefonts.cn/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .transcript-entry {
            transition: background-color 0.3s;
        }
        .transcript-entry.doctor {
            border-left: 4px solid #3b82f6;
        }
        .transcript-entry.patient {
            border-left: 4px solid #10b981;
        }
        .highlight {
            background-color: #fef3c7;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">AI助手辅助问诊记录工具</h1>
            <p class="text-gray-600">实时语音转文字 · 智能分析 · 自动生成问诊记录</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧：语音输入和实时转录 -->
            <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold text-gray-800">实时语音转录</h2>
                    <div class="flex space-x-2">
                        <button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-microphone mr-2"></i>开始录音
                        </button>
                        <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg">
                            <i class="fas fa-cog mr-2"></i>设置
                        </button>
                    </div>
                </div>

                <div class="bg-gray-100 rounded-lg p-4 h-96 overflow-y-auto mb-4" id="transcript-container">
                    <div class="transcript-entry doctor mb-3 p-3 rounded">
                        <div class="flex items-center mb-1">
                            <span class="font-semibold text-blue-600">医生</span>
                            <span class="text-xs text-gray-500 ml-2">10:30:05</span>
                        </div>
                        <p>您好，请问哪里不舒服？</p>
                    </div>
                    <div class="transcript-entry patient mb-3 p-3 rounded">
                        <div class="flex items-center mb-1">
                            <span class="font-semibold text-green-600">患者</span>
                            <span class="text-xs text-gray-500 ml-2">10:30:12</span>
                        </div>
                        <p>医生，我头痛三天了，越来越严重。</p>
                    </div>
                    <div class="transcript-entry doctor mb-3 p-3 rounded">
                        <div class="flex items-center mb-1">
                            <span class="font-semibold text-blue-600">医生</span>
                            <span class="text-xs text-gray-500 ml-2">10:30:20</span>
                        </div>
                        <p>头痛是哪种性质的？是胀痛还是刺痛？</p>
                    </div>
                    <div class="transcript-entry patient mb-3 p-3 rounded">
                        <div class="flex items-center mb-1">
                            <span class="font-semibold text-green-600">患者</span>
                            <span class="text-xs text-gray-500 ml-2">10:30:28</span>
                        </div>
                        <p>主要是胀痛，感觉头要炸了一样。</p>
                    </div>
                </div>

                <div class="flex justify-between items-center">
                    <div class="text-sm text-gray-500">
                        <span>识别准确率: 96.8%</span>
                    </div>
                    <div class="flex space-x-2">
                        <button class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-pause"></i> 暂停
                        </button>
                        <button class="text-gray-600 hover:text-gray-800">
                            <i class="fas fa-redo"></i> 重新开始
                        </button>
                    </div>
                </div>
            </div>

            <!-- 右侧：分析结果和诊断建议 -->
            <div class="space-y-6">
                <!-- 关键信息提取 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">关键信息提取</h2>
                    <div class="space-y-3">
                        <div class="flex justify-between items-start">
                            <span class="font-medium text-gray-700">主要症状</span>
                            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">头痛(3天)</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="font-medium text-gray-700">疼痛性质</span>
                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded">胀痛</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="font-medium text-gray-700">严重程度</span>
                            <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">逐渐加重</span>
                        </div>
                        <div class="flex justify-between items-start">
                            <span class="font-medium text-gray-700">相关症状</span>
                            <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded">无</span>
                        </div>
                    </div>
                </div>

                <!-- 诊断建议 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">AI诊断建议</h2>
                    <div class="border-l-4 border-blue-500 pl-4 py-2 mb-3">
                        <h3 class="font-semibold text-gray-800">初步诊断</h3>
                        <p class="text-gray-600">偏头痛可能性较大 (置信度: 85%)</p>
                    </div>
                    <div class="border-l-4 border-green-500 pl-4 py-2 mb-3">
                        <h3 class="font-semibold text-gray-800">建议检查</h3>
                        <p class="text-gray-600">头颅CT，血常规</p>
                    </div>
                    <div class="border-l-4 border-yellow-500 pl-4 py-2">
                        <h3 class="font-semibold text-gray-800">处理建议</h3>
                        <p class="text-gray-600">可尝试布洛芬缓解疼痛，注意休息，避免强光刺激</p>
                    </div>
                    <div class="mt-4 pt-4 border-t border-gray-200">
                        <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 rounded-lg">
                            <i class="fas fa-file-medical mr-2"></i>生成完整问诊记录
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 问诊记录预览 -->
        <div class="mt-6 bg-white rounded-xl shadow-md p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold text-gray-800">问诊记录预览</h2>
                <div class="flex space-x-2">
                    <button class="text-gray-600 hover:text-gray-800">
                        <i class="fas fa-edit mr-1"></i>编辑
                    </button>
                    <button class="text-gray-600 hover:text-gray-800">
                        <i class="fas fa-download mr-1"></i>导出
                    </button>
                </div>
            </div>
            <div class="border border-gray-200 rounded-lg p-4">
                <div class="grid grid-cols-3 gap-4 mb-4">
                    <div>
                        <p class="text-sm text-gray-500">姓名</p>
                        <p>张三</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">性别</p>
                        <p>男</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">年龄</p>
                        <p>35岁</p>
                    </div>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">主诉</h3>
                    <p>头痛三天，逐渐加重</p>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">现病史</h3>
                    <p>患者三天前无明显诱因出现头痛，主要为胀痛，感觉头要炸了一样，症状逐渐加重，无其他伴随症状。</p>
                </div>
                
                <div class="mb-4">
                    <h3 class="font-semibold text-gray-800 mb-2">初步诊断</h3>
                    <p>偏头痛可能性较大</p>
                </div>
                
                <div>
                    <h3 class="font-semibold text-gray-800 mb-2">处理意见</h3>
                    <p>1. 可尝试布洛芬缓解疼痛<br>
                       2. 注意休息，避免强光刺激<br>
                       3. 建议完善头颅CT检查</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 简单的交互功能
        document.getElementById('record-btn').addEventListener('click', function() {
            const btn = this;
            if (btn.classList.contains('bg-red-500')) {
                btn.classList.remove('bg-red-500', 'hover:bg-red-600');
                btn.classList.add('bg-gray-500', 'hover:bg-gray-600');
                btn.innerHTML = '<i class="fas fa-microphone mr-2"></i>停止录音';
            } else {
                btn.classList.remove('bg-gray-500', 'hover:bg-gray-600');
                btn.classList.add('bg-red-500', 'hover:bg-red-600');
                btn.innerHTML = '<i class="fas fa-microphone mr-2"></i>开始录音';
            }
        });
    </script>
</body>
</html>
